<!DOCTYPE html>
<html class="no-js css-menubar" lang="zh-cn">
  <head>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

    <style>
      #main{
        height: 20px;z-index: 10;position: absolute;left: 0px;top: 100px;background: white;overflow:hidden;
      }
      .numberScrollPar{width:100%;height:100%;}
      .child{width:100%;height:20px;line-height:20px;text-align: center;}
    </style>
    <link rel="stylesheet" href="numberScroll.css" />
  </head>

  <body>
    <div id='main'>
      <template v-for="val in numberArr">
        <div style="width:20px;height:20px;float:left">
          <div class="numberScrollPar">
            <template v-for="i in 10">
              <div class="child">{{i-1}}</div>
            </template>
          </div>
        </div>
      </template>
    </div>

    <script type="text/javascript">
      new Vue({
        el: '#main',
        data: {
          numberArr: [7,9,4,5,0,6,0,2,1]
        },
         mounted() {
          const element = document.getElementsByClassName('numberScrollPar');
          for(let i=0;i<element.length;i++){
            const name = 'numberScroll_'+this.numberArr[i];
            element[i].classList.add(name);
          }
        }
      });
    </script>
  </body>
</html>